$(() => {
  // console.log('xxxxxxxxxx')
  let ul = $('.AboutJinr-honor>.content>ul');
  let lis = $('.AboutJinr-honor>.content>ul>li')
  let content = document.querySelector('.AboutJinr-honor>.content')
  // console.log(lis.height(), lis)
  ul.width((ul.children().length) * lis.width())
  let str = [];
  [].forEach.call(lis, (item, index) => {
    str.push('<span></span>')
  })
  // console.log('str', ul)
  $('.AboutJinr-honor>div.content>div.index').append($(str.join('')))

  console.log()
  // content[0].on('touch',function(){
  //   console.log('===========')
  // })
  console.log('content', content)
  // content.on('touch',function(){
  //   console.log('-----------')
  // })
  // content.addEventListener('touchmove', function (e) {
  //       console.log('xxxxxxxxxxxxxxxxxxxxxxxxx', e)
  // }, false)

  class touch {
    constructor(container, content) {
      this.container = document.querySelector(container) // 外层容器
      this.content = document.querySelector(content)     // 内层容器content
      this.page = this.content.querySelectorAll('.page') // 子项名称
      this.indexNote = this.container.querySelector('.index') // 索引
      this.width = this.container.offsetWidth
      this.startX = 0;
      this.endX = 0;
      this.distance = 0;
      this.distanceStep = 0;
      this.index = 0;
      this.init();
    }
    swiper(dr, callback) {

    }
    init() {
      // [].forEach.bind(this.page)((item)=>{
      //   item.style.width = this.width +'px'
      // })
      // this.content.style.width = this.width*this.page.length+'px'
      this.container.addEventListener('touchstart', this.touchstart.bind(this), false)
      this.container.addEventListener('touchend', this.touchend.bind(this), false)
      this.container.addEventListener('touchmove', this.touchmove.bind(this), false)
      this.addIndex()
    }
    touchstart(e) {
      e.preventDefault()
      this.startX = e.touches[0].clientX
      this.content.style.transition = 'all 0s'
      // console.log('-------', this.startX)  transition: all 0s;
    }
    touchend(e) {
      e.preventDefault()
      this.endX = e.changedTouches[0].clientX
      if (Math.abs(this.distanceStep) < 150) {
        this.content.style.transition = 'all 0.5s'
        this.content.style['-webkit-transform'] = `translate(${this.distance}px, 0)`
      } else {
        this.move()
      }
    }
    touchmove(e) {
      e.preventDefault()
      let step = this.distanceStep = e.changedTouches[0].clientX - this.startX
      console.log('temp', step)
      this.content.style['-webkit-transform'] = `translate(${this.distance+step}px, 0)`

    }
    move() {
      // console.log('width', this.width)
      let step // 滑动步长
      // console.log(this.page.length, this.index)
      if (this.distanceStep > 0 && this.index > 0) { //右滑
        this.index--
        this.sync(this.index)
        step = this.width
      } else if (this.distanceStep < 0 && this.index < this.page.length-1) { // 左滑
        this.index++
        step = -this.width
        this.sync(this.index)
      } else {
        step = 0
      }
      // console.log('step', step, this.index)
      // 移动距离
      this.distance += step;

      // console.log('pg', this.index)
      this.content.style.transition = 'all 0.5s'
      this.content.style['-webkit-transform'] = `translate(${this.distance}px, 0)`
    }
    // 图片下方小点同步
    addIndex() {
      let fagment = document.createDocumentFragment();
      [].forEach.call(this.page, (item, index) => {
        fagment.appendChild(document.createElement('span'))
      })
      this.indexNote.appendChild(fagment)
      this.indexNote.children[0].className = 'active'
      console.log('fagment', this.indexNote.children)

    }
    sync(index) {
      // index+=1;
      console.log('------', index);
      [].forEach.bind(this.indexNote.children)((note, i) => {
        if (i === index) {
          this.indexNote.children[i].className = 'active'
        } else {
          this.indexNote.children[i].className = ''
        }
      })
      // console.log('this.indexNote.children[index].className', this.indexNote.children[index].className)
    }

  }

  new touch('.AboutJinr-honor>.container', '.AboutJinr-honor>.container>.content')

})